import React, { Component } from 'react';
import { Button, Modal, Form, Drawer, PageHeader, Divider, Badge, Tabs, Row } from 'antd';
import '@/assets/css/settings';
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout';
import { BasicPagination, isInvalidObject, compareNum, TableCustomize, openSuccessModal, openModalMessage, compareString } from '../../../components/TableCustomize'
import { withPermission } from '../../../components/withpermission';
import { getDateHHMMYY_HHMMSS, getStringByDate } from '../../../utils/action'
import * as CheckManagementService from '../../../axios/CheckManagement'
import ReceiveComponentItem from './ReceiveComponentItem';
import { withRouter } from 'react-router';
const CreateButton = withPermission(Button, 'create')
const { confirm } = Modal

const { TabPane } = Tabs
class ReceiveComponent extends Component {
    state = {
        columns: [
            {
                title: '序号',
                dataIndex: 'id',
                width: 100,
                render: (text, record, index) => `${index + 1}`,
            },

            {
                title: '检验项目编码',
                width: 150,
                dataIndex: 'checkItemCode',
                sorter: (a, b) => compareString(a.checkItemCode, b.checkItemCode)
            },
            {
                title: '检验项目名称',
                width: 150,
                // allowEllipsis: true,
                dataIndex: 'checkItemName',
                sorter: (a, b) => compareString(a.checkItemName, b.checkItemName)
            },
            {
                title: '所属表单',
                width: 150,
                dataIndex: 'formProperties',
                // sorter: (a, b) => compareString(a.partName, b.partName)
            },
            {
                title: '第二类别所属分类',
                width: 150,
                dataIndex: 'checkTypeSecond',
                sorter: (a, b) => compareString(a.checkTypeSecond, b.checkTypeSecond)
            },
            {
                title: '检验项目属性',
                width: 130,
                dataIndex: 'checkItemProperty',
                sorter: (a, b) => compareNum(a.checkItemProperty, b.checkItemProperty),
                render: (text, record, index) => {
                    return text == 1 ? '范围' : text == 2 ? '文本' : text == 3 ? '唯一值' : text == 4 ? '复选' : ''
                }
            },
            {
                title: '检验标准范围',
                width: 120,
                dataIndex: 'checkStandard',
                // sorter: (a, b) => compareNum(a.checkStandardMax, b.checkStandardMax),
                render: (text, record, index) => {
                    return record.checkStandardMin + ' ~ ' + record.checkStandardMax
                }
            },
            {
                title: '检验参数',
                width: 100,
                dataIndex: 'checkParameter',
                editable: true,
                sorter: (a, b) => compareNum(a.checkParameter, b.checkParameter),
            },
            {
                title: '创建人',
                width: 100,
                dataIndex: 'userName',
                sorter: (a, b) => compareNum(a.userName, b.userName),
            },
            {
                title: '创建时间',
                width: 100,
                dataIndex: 'updateTime',
                sorter: (a, b) => compareNum(a.updateTime, b.updateTime),
            },
            {
                title: '结果',
                width: 100,
                dataIndex: 'checkResult',
                fixed: 'right',
                sorter: (a, b) => compareNum(a.checkResult, b.checkResult),
                render: (text) => {
                    let a = this.state.checkResultList.find(item => item.id == text)
                    return a.id == '0' ? <Badge color='#1890ff' text={<span style={{ color: '#1890ff' }}>{a.value}</span>} />
                        : a.id == '1' ? <Badge status="success" text={<span style={{ color: '#1e8e3e' }}>{a.value}</span>} />
                            : a.id == '2' ? <Badge status="error" text={<span style={{ color: '#f00' }}>{a.value}</span>} />
                                : a.value
                }
            },
            {
                title: '操作',
                width: 150,
                fixed: 'right',
                dataIndex: 'opts',
                render: (text, record) => <><a onClick={() => this.updateReport(record)}>变更</a></>
            }
        ],
        chooseRecord: [],
        activeKey: '0',
    };
    componentDidMount() {
        console.log(this.props.chooseRecord)
        this.setState({ chooseRecord: [...this.props.chooseRecord, ...this.props.chooseRecord, ...this.props.chooseRecord] })
    }

    onChangeTabs = activeKey => {
        this.setState({ activeKey });
    };

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };


    render() {
        const { chooseRecord } = this.state;
        const userName = localStorage.getItem('userName')
        const spanStyle = { color: '#1890FF', margin: '0 3px' }
        return (
            <div>
                <Row>接收人：{userName}</Row>
                <Row>接收时间：{getStringByDate(new Date(), 'YYYY-MM-DD HH:mm')}</Row>
                <Row>&emsp;</Row>
                <Tabs
                    hideAdd
                    // className="layout-model"
                    onChange={this.onChangeTabs}
                    activeKey={this.state.activeKey}
                    type="card"
                    onEdit={this.onEdit}>
                    {chooseRecord.map((pane, index) => (
                        <TabPane tab={pane.formProperties + '_' + index} key={index.toString()}>
                            <ReceiveComponentItem formData={pane} spanStyle={spanStyle} />
                        </TabPane>
                    ))}
                </Tabs>
            </div>
        );
    }
}
export default Form.create()(withRouter(ReceiveComponent));
